<script>
export default {
  name: "MenuItem",
  functional: true,
  props: {
    icon: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  render(h, context) {

    const { title } = context.props;
    const vnodes = [];

    // if (icon) {
    //   if (icon.includes("el-icon")) {
    //     vnodes.push(<i class={[icon, "sub-el-icon"]} />);
    //   } else {
    //     vnodes.push(<svg-icon icon-class={icon} />);
    //   }
    // }

    if (title) {
      vnodes.push(<span slot="title">{title}</span>);
    }
    return vnodes;
  },
};
</script>

<style scoped lang="scss">
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
.el-menu-item.is-active {
  border-bottom-width: 0;
  border-color: #fff;
  font-weight: bold;
  background-color: #fff !important;
  &:hover {
    background-color: #fff !important;
  }
}
.el-menu-item {
  &:hover {
    font-weight: bold;
    background-color: #fff !important;
  }
}
.el-menu{
  border-bottom-width: 0;
  border-color: #fff;
  background-color: #fff !important;
  &:hover {
    background-color: #fff !important;
  }
}
</style>
